<template>
	<view class="main_content" :style="{backgroundImage:`url(${ossImg('others/2025Autumn/background/bg.png')})`}">
		<image :src="ossImg('others/2025Autumn/logo.png')" mode="widthFix" class="w-240rpx h-105rpx"></image>
		<view class="chooseCenter">
			<image :src="ossImg('others/2025Autumn/changeOne.png')" mode="widthFix" class="w-282rpx h-77rpx mx-auto mt-[140rpx]"></image>
			<view class="swiper-container">
				<SwiperComponent 
					:swiperList="biscuit" 
					@currentChange="handleCurrentChange"
					ref="swiperRef"
					/>
			</view>
			<view class="mb-24rpx">
				<text v-for="i in biscuit.length" class="dot" :key="i" :class="{ active: currentSelectedIndex === i - 1 }"></text>
			</view>
			<view class="sliderLeftToRight">
				<image :src="ossImg('others/2025Autumn/hand.png')" mode="widthFix" class="w-32rpx h-35rpx mr-10rpx"></image>
				<text class="text-24rpx text-white pubfont">左右滑动进行选择</text>
			</view>
		</view>
		<view @click="goToSetCookiePattern" class="btn-select mt-160rpx">
			<image mode="aspectFit" :src="ossImg('others/2025Autumn/btn/choose.png')" class="w-[360rpx] h-[124rpx]"></image>
		</view>
		<view class="lineSelect" :style="{backgroundImage:`url(${ossImg('others/2025Autumn/linebackground/loadingBg.png')})`}"></view>
		<view class="cloudBg"><image :src="ossImg('others/2025Autumn/cloud.png')" mode="widthFix"></image></view>
	</view>
</template>
<script setup>
	import { onLoad,onShareAppMessage } from '@dcloudio/uni-app';
	import { ref } from "vue";
	import { ossImg } from "@/utils/utils";
	import SwiperComponent from './components/SwiperComponent.vue'
	const enterTime = +new Date();
	const emdlz = getApp().emdlz;
	const swiperRef = ref(null)
	const currentSelectedIndex = ref(0)
	const currentIndex = ref(0);
	const biscuit = ref([]);
	const goToSetCookiePattern = () => {
		const res = uni.getStorageSync("autumnSelectedCookiePatternIndex");
		if(res == ''){
			handleCurrentChange(0);
		}else{
			handleCurrentChange(res)
		}
		if(enterTime){
			emdlz('track','event','oreo_onpack_2025_interact_1','view','interact_1',(+new Date() - enterTime)/1000);
		}
		emdlz('track','event','oreo_onpack_2025_interact_1','click','check_confirm');
		uni.navigateTo({
			url: "/campaign/pages/2025Autumn/setCookiePattern"
		});
	};
	const handleCurrentChange = (index) => {
		console.log(index,'子组件返回当前第几张');
		currentSelectedIndex.value = index;
		uni.setStorageSync("autumnSelectedCookiePatternIndex", index);
		emdlz('track','event','oreo_onpack_2025_interact_1','slide',`Slide_check_${index}`);
	}

	onLoad(() => {
		const res = uni.getStorageSync("autumnConfig");
		biscuit.value = res?.biscuit || [];
		
		console.log(biscuit.value,'选择饼纹');
	});
	onShareAppMessage((e) => {
	
	    const shareObj = {
	        title: "进来！你的玩心梦想竟然是…", // 默认是小程序的名称(可以写slogan等)
	        path: "/campaign/pages/2025Autumn/index", // 默认是当前页面，必须是以‘/’开头的完整路径
	        imageUrl: ossImg("others/2025Autumn/shareBiscuit.jpg"), //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
	        success: (res) => {
	            // 转发成功之后的回调
	            if (res.errMsg == "shareAppMessage:ok") {
	            }
	        },
	        fail: (err) => {
	            // 转发失败之后的回调
	            console.log("转发失败之后的回调", err);
	            if (res.errMsg == "shareAppMessage:fail cancel") {
	                // 用户取消转发
	                console.log("用户取消转发");
	            } else if (res.errMsg == "shareAppMessage:fail") {
	                // 转发失败，其中 detail message 为详细失败信息
	                console.log("转发失败，其中detail message 为详细失败信息");
	            }
	        },
	        complete: () => {
	            console.log("转发结束之后的回调（转发成不成功都会执行）");
	        },
	    };
	    console.log(shareObj);
	    return shareObj;
	});
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";
@import "@/static/css/autumn/main.less";

.main_content {
    font-family: autumn;
    width: 100%;
    height: 100vh;
    display: flex;
    box-sizing: border-box;
    padding-top: 30px;
    background-size: cover;
    flex-direction: column;
    align-items: center;
	align-content: space-between;
    position: fixed;
    top:0;left:0;right:0;bottom:0;
}
.chooseCenter{width:100%;flex-direction: column;display: flex;box-sizing: border-box;text-align:center;}
.swiper-container {
    width: 100%;
    height:auto;
    position: relative;
	padding:0 0 20rpx;
}

.swiper {
    height: 100%;
	display:flex;align-items:center;justify-content:center;
}

.swiper-item {
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直居中，确保三图中心线对齐 */
    position: relative;
	width:216rpx;
	height:405rpx;
	flex:216rpx 0 0;
}

.slide-image {
    width:216rpx;
    height:216rpx;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    position: relative;
}

.slide-image.active {
    width:403rpx;
    height:405rpx;
    z-index: 10;
    transform: translateY(-40rpx); /* 向上位移减少，确保中心线对齐 */
}

/* 关键调整：通过负边距实现中间图覆盖两侧图 */
.slide-image.active + .slide-image,
.slide-image + .slide-image.active {
    margin-top: 40rpx; /* 两侧图下移40rpx，使中间图覆盖上半部分 */
}
:deep(.uni-swiper-dots-horizontal), 
:deep(.wx-swiper-dots) {
    bottom: -50rpx !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.dot {
    width: 12rpx;
    height: 12rpx;
    margin: 0 10rpx;
    border-radius: 6rpx;
    background-color: rgba(255, 255, 255, 0.3);
    display: inline-block;
    transition: all 0.3s ease;
    &.active {
        background-color: #fff;
    }
}
.sliderLeftToRight {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 30rpx;
}
.btn-select {
	width:100%;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 1;
}
</style>
